<template>
    <section class="asn-dialog">
        <el-dialog :title="title" :visible.sync="isShow" :width="width" :close-on-click-modal="false" destroy-on-close>
            <span>
                <slot name="add" :item="form" />
                <slot name="edit" :item="form" />
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShow = false" size="small">取 消</el-button>
                <el-button type="primary" @click="sendRequest" size="small" :loading="loading">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
import _md5 from 'crypto-js'
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        width: {
            type: String | Number,
            default: '30%'
        },
        types: {
            type: String,
            default: 'add'
        },
    },
    data() {
        return {
            isShow: false,
            loading: false,
            api: '',
            form: {}
        }
    },
    methods: {
        showDialog(api, item) {
            this.form = {}
            if (this.types == 'edit') {
                this.form = Object.assign({}, item)
            }
            this.isShow = true
            this.api = api
        },
        async sendRequest() {
            try {
                this.loading = true
                const data = Object.assign({}, this.form)
                console.log(data);
                return
                await this.send(data)
                if (this.types == 'add') {
                    this.$emit('added', {})
                } else {
                    this.$emit('edited', {})
                }
            } catch (err) {

            } finally {
                this.loading = false
                this.isShow = false
            }
        },

        send(data) {
            switch (this.types) {
                case 'add':
                    return this.api.addAsyncList(data)
                    break;
                case 'edit':
                    return this.api.modifyAsyncList(data)
                    break;
                default:
                    return this.api.getAsyncList(data)
                    break;
            }
        },
    }
}
</script>

<style lang="scss" scoped></style>